<template>
  <div class="change_pwd">
    <!-- 标题 -->
    <van-nav-bar @click-left="$router.back()" border>
      <template #left>
        <van-icon name="arrow-left" class="m_fs18" color="#333"/>
      </template>
      <template #title>
        <div class="title m_fs18 m_fw">设置密码</div>
      </template>
    </van-nav-bar>

    <!-- 账号验证表单 -->
    <form class="form" @submit.prevent="onSubmit">
      <van-field v-model="tel" type="tel" label="手机号" readonly center/>
      <van-field v-model="password" center :type="looked?'text':'password'" label="新密码" 
      placeholder="8-20位数字和字母">
        <template #button>
          <van-icon class="m_fs15" :name="looked?'eye-o':'closed-eye'" @click="looked=!looked"/>
        </template>
      </van-field>
      <div class="confirm_box m_tac">
        <van-button class="confirm_btn" :disabled="password.length<8" color="#008080" round>确定</van-button>
      </div>
    </form>
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
  name: 'ChangePwd',
  data(){
    return{
      tip: '发送验证码',
      password: '',
      looked: false
    }
  },
  computed: {
    ...mapState('m_user', ['userinfo']),
    ...mapGetters('m_user', ['tel'])
  },
  methods: {
    // 提交表单
    onSubmit(){
      this.axios.post('update/password',{
        phone: this.userinfo.phone,
        password: this.password
      }).then(res=>{
        if(res.code===0){
          this.$toast('密码设置成功')
          this.$router.go(-2)
        }else{
          this.$toast('修改失败')
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.change_pwd{
  height: 100vh;
  background: #f7f7f7;
  .form{
    margin-top: 20px;
    .van-field{
      height: 50px;
    }
    .confirm_box{
      margin-top: 20px;
      .confirm_btn{ width: 140px;}
    }
    .tip{
      color: #008080;
      &.tip2{
        color: #bfbfbf;
      }
    }
  }
}
</style>